<template>
  <div
    class="quality_visualiztion"
    style="margin-left: 40px; margin-right: 40px; margin-top: 30px"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :key="'first'" label="项目bug趋势图" name="first">
        <div
          class="block"
          style="margin-left:140px; margin-right: 40px; margin-top: 20px"
        >
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="getBugOfProject"
          />
          <span style="font-size:15px;font-weight:bold;margin-left:10px;color: dodgerblue;" class="mark">bug总数:{{ BugOfProjectResult }}</span>
        </div>
        <div>
          <el-row v-loading="loading" :span="12" style="margin-top: 126px">
            <MixLineChartBugOfProject
              v-if="isChildUpdate1"
              :id="'lintData_bug_of_project'"
              :width="'70%'"
              height="500%"
              :chart-data="lintData_bug_of_project"
            />
          </el-row>

        </div>
      </el-tab-pane>

      <el-tab-pane :key="'second'" label="项目bug情况" name="second">
        <div class="app-container">
          <el-row :gutter="10" type="flex" class="count-table">
            <el-col :span="7">
              <el-select
                ref="select"
                v-model="listQueryBugByDays.group_name"
                clearable
                placeholder="请选择业务线"
                class="group"
                @change="getProjectN"
              >
                <el-option
                  v-for="item in group_namelist"
                  :key="item.group_name"
                  :label="item.group_name"
                  :value="item.group_id"
                />
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="listQueryBugByDays.project_name"
                clearable
                placeholder="请选择产品线"
                class="project"
                @change="getVersionN"
              >
                <el-option
                  v-for="item in project_namelist"
                  :key="item.project_name"
                  :label="item.project_name"
                  :value="item.project_id"
                />
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="listQueryBugByDays.version_name"
                clearable
                placeholder="请选择版本号"
                class="version"
                @change="handleFilter"
              >
                <el-option
                  v-for="item in version_list"
                  :key="item.project_version_name"
                  :label="item.project_version_name"
                  :value="item.project_version_name"
                />
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="listQueryBugByDays.type"
                clearable
                placeholder="按天/小时显示数据"
                class="type"
                @change="handleFilter"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>

        <div>
          <el-row v-loading="loading" style="margin-top: 50px">
            <MixLineChartBugByDays
              v-if="isChildUpdate2"
              :id="'lintData_bug_by_days'"
              :width="'100%'"
              height="500%"
              :chart-data="lintData_bug_by_days"
            />
          </el-row>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane :key="'third'" label="bug率统计(天)" name="third">
        <div>
          <el-row v-loading="loading" style="margin-top: 146px">
            <BugCalcuDay
              v-if="isChildUpdate3"
              :id="'lintData_bug_of_project'"
              :width="'100%'"
              height="500%"
              :chart-data="lintData_bug_of_project"
            />
          </el-row>
        </div>
      </el-tab-pane> -->
      <el-tab-pane :key="'third'" label="reopen_bug统计" name="third">
        <div>
          <el-row v-loading="loading" style="margin-top: 146px">
            <MixLineChartBugReopen
              v-if="isChildUpdate3"
              :id="'lintData_bug_reopen'"
              :width="'100%'"
              height="500%"
              :chart-data="lintData_bug_reopen"
            />
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane :key="'fourth'" label="人员bug统计" name="fourth">
        <div
          class="block"
          style="margin-left: 20px; margin-right: 40px; margin-top: 20px"
        >
          <el-row :gutter="10" type="flex" class="count-table">
            <el-col :span="4">
              <el-select
                v-model="listQueryBugOfHandler.project"
                clearable
                placeholder="请选择项目组"
                class="type"
                @change="handleFilterHandler"
              >
                <el-option
                  v-for="item in projectGroupOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                ref="select"
                v-model="listQueryBugOfHandler.user_id"
                clearable
                placeholder="请选择开发人员"
                class="group"
                @change="handleFilterHandler"
              >
                <el-option
                  v-for="item in handler_list"
                  :key="item.realname"
                  :label="item.realname"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-date-picker
                v-model="dateValue2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                @change="handleFilterHandler"
              />
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row v-loading="loading" :gutter="24" style="margin-top: 146px">
            <el-col :span="16">
              <el-row>
                <MixLineChartBugOfHandler
                  v-if="isChildUpdate4"
                  :id="'lintData_bug_of_handler'"
                  :width="'100%'"
                  height="500%"
                  :chart-data="lintData_bug_of_handler"
                />
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row>
                <MixLineChartBugOfHandlerStatus
                  v-if="isChildUpdate5"
                  :id="'lintData_bug_of_handler_status'"
                  :width="'100%'"
                  height="500%"
                  :chart-data="lintData_bug_of_handler_status"
                />
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane :key="'sixth'" label="上周bug统计饼图" name="sixth">
        <div>
          <el-row v-loading="loading" style="margin-top: 50px;">
            <LastWeekBugPie
              v-if="isChildUpdate6"
              :width="'100%'"
              height="500%"
            />
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane :key="'seventh'" label="解决bug时间统计" name="seventh">
        <div>
          <el-row v-loading="loading">
            <BugTimeFinish
              v-if="isChildUpdate7"
              :width="'100%'"
              height="500%"
            />
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane :key="'eighth'" label="未解决bug列表" name="eighth">
        <div>
          <el-row v-loading="loading">
            <BugNotClosed
              v-if="isChildUpdate8"
              :width="'100%'"
              height="500%"
            />
          </el-row>
        </div>
      </el-tab-pane>

    </el-tabs>
    <!-- label：选项卡显示的title name：与选项卡绑定的activeName对应的标识符，表示选项卡的别名-->
  </div>
</template>

<script>
import MixLineChartBugByDays from './components/MixLineChart'
import MixLineChartBugOfProject from './components/MixLineChart'
import MixLineChartBugOfHandler from './components/MixLineChartBugOfHandler'
import MixLineChartBugOfHandlerStatus from './components/MixLineChart'
import MixLineChartBugReopen from './components/MixLineChartBugReopen'
import LastWeekBugPie from './bug-lastWeekPie'
import BugTimeFinish from './bug-timeFinish'
import BugNotClosed from './bug_notClosed'
import { getGroupName, getProjectName } from '@/api/report'
import { handlerList } from '@/api/user'
import { projectVersionName } from '@/api/bug-calculate'
import {
  bugByDays,
  bugOfProject,
  bugReopen,
  bugOfHandler
} from '@/api/quality_visualization'
import { Message } from 'element-ui'
const typeOptions = [
  { value: 'day', label: '天' },
  { value: 'hour', label: '小时' }
]
const projectGroupOptions = [
  { value: '项目一组', label: '项目一组' },
  { value: '项目二组', label: '项目二组' },
  { value: '项目三组', label: '项目三组' },
  { value: 'App研发组', label: 'App研发组' },
  { value: '大数据', label: '大数据' },
  { value: '终端支持组', label: '终端支持组' },
  { value: '前端组', label: '前端组' }
]
export default {
  components: {
    MixLineChartBugByDays,
    MixLineChartBugOfProject,
    MixLineChartBugReopen,
    MixLineChartBugOfHandler,
    MixLineChartBugOfHandlerStatus,
    LastWeekBugPie,
    BugTimeFinish,
    BugNotClosed
  },
  data() {
    return {
      activeName: 'first',
      lintData_bug_by_days: [],
      lintData_bug_of_project: [],
      lintData_bug_reopen: [],
      lintData_bug_of_handler: [],
      lintData_bug_of_handler_status: [],
      lintData_bug_data_last_week: [],
      listQueryBugByDays: {
        group_name: '',
        type: 'day',
        version_name: '',
        project_name: ''
      },
      listQueryBugOfProject: {
        start_time: '',
        end_time: ''
      },
      listQueryBugOfHandler: {
        start_time: '',
        end_time: '',
        project: '项目一组',
        user_id: ''
      },
      isChildUpdate1: true,
      isChildUpdate2: false,
      isChildUpdate3: false,
      isChildUpdate4: false,
      isChildUpdate5: false,
      isChildUpdate6: false,
      isChildUpdate7: false,
      isChildUpdate8: false,
      group_namelist: '',
      project_namelist: '',
      version_list: '',
      handler_list: '',
      loading: false,
      typeOptions,
      projectGroupOptions,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateValue: '',
      dateValue2: '',
      timeDefaultShow: '',
      BugOfProjectResult: 0
    }
  },
  created() {
    this.getGroupN()
    this.week_before()
    this.getHandler()
    // this.queryBugByDays()
  },
  methods: {
    getHandler() {
      handlerList()
        .then((res) => {
          this.handler_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getBugOfHandler() {
      if (this.dateValue2 !== null && this.dateValue2 !== '') {
        this.listQueryBugOfHandler.start_time = this.dateValue2[0]
        this.listQueryBugOfHandler.end_time = this.dateValue2[1]
      } else {
        this.listQueryBugOfHandler.start_time = ''
        this.listQueryBugOfHandler.end_time = ''
      }
      bugOfHandler(this.listQueryBugOfHandler)
        .then((res) => {
          let online = []
          let bug = []
          let status = []
          if (res.data.length !== 0) {
            bug = res.data[0].counter
            online = res.data[1].counter
            status = res.data[2].counter
          }
          this.lintData_bug_of_handler = [
            {
              color: '#006699',
              counter: online,
              name: '线上bug数',
              type: 'bar'
            },
            {
              color: '#16afcc',
              counter: bug,
              name: '总bug数',
              type: 'bar'
            }
          ]
          this.lintData_bug_of_handler_status = [
            {
              color: '#006699',
              counter: status,
              name: 'bug状态',
              type: 'bar'
            }
          ]
          this.loading = false
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loading = true
        })
    },
    week_before() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      const start_ymd =
        start.getFullYear() +
        '-' +
        (start.getMonth() + 1) +
        '-' +
        start.getDate()
      const end_ymd =
        end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
      this.dateValue = [start_ymd, end_ymd] // 将值设置给插件绑定的数据
      this.getBugOfProject()
    },
    getBugReopen() {
      bugReopen()
        .then((res) => {
          this._data.lintData_bug_reopen = res.data
          this.loading = false
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loading = true
        })
    },
    getBugByDays() {
      if (
        this.listQueryBugByDays.version_name !== '' &&
        this.listQueryBugByDays.type !== ''
      ) {
        this.loading = true
        const {
          type,
          version_name,
          project_name
        } = this._data.listQueryBugByDays
        bugByDays(project_name, version_name, type)
          .then((res) => {
            this._data.lintData_bug_by_days = res.data
            this.loading = false
          })
          .catch((err) => {
            Message.error(err.msg || err.message || err.value)
            this.loading = true
          })
      }
    },
    getBugOfProject() {
      if (this.dateValue === null) {
        this.listQueryBugOfProject.start_time = ''
        this.listQueryBugOfProject.end_time = ''
      } else {
        this.listQueryBugOfProject.start_time = this.dateValue[0]
        this.listQueryBugOfProject.end_time = this.dateValue[1]
      }
      this.loading = true
      bugOfProject(this.listQueryBugOfProject)
        .then((res) => {
          this._data.lintData_bug_of_project = res.data
          this.BugOfProjectResult = res.data[0].result

          this.loading = false
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loading = true
        })
    },
    getGroupN() {
      getGroupName()
        .then((res) => {
          this.group_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getVersionN(groudId) {
      if (!groudId) {
        this.version_list = ''
        this.listQueryBugByDays.version_name = ''
        return
      }
      projectVersionName(groudId)
        .then((res) => {
          this.version_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getProjectN(groudId, e) {
      this.project_namelist = ''
      this.listQueryBugByDays.project_name = ''
      this.version_list = ''
      this.listQueryBugByDays.version_name = ''
      this.getGroupN()
      if (!groudId) {
        return
      }
      getProjectName(groudId)
        .then((res) => {
          this.project_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    handleFilter(groudId) {
      this.getBugByDays()
    },
    handleFilterHandler() {
      this.getBugOfHandler()
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isChildUpdate1 = true
        this.isChildUpdate2 = false
        this.isChildUpdate3 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
      } else if (tab.name === 'second') {
        this.isChildUpdate2 = true
        this.isChildUpdate1 = false
        this.isChildUpdate3 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
      } else if (tab.name === 'third') {
        this.getBugReopen()
        this.isChildUpdate3 = true
        this.isChildUpdate1 = false
        this.isChildUpdate2 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
      } else if (tab.name === 'fourth') {
        this.getBugOfHandler()
        this.isChildUpdate4 = true
        this.isChildUpdate5 = true
        this.isChildUpdate1 = false
        this.isChildUpdate2 = false
        this.isChildUpdate3 = false
      } else if (tab.name === 'sixth') {
        this.isChildUpdate6 = true
        this.isChildUpdate1 = false
        this.isChildUpdate2 = false
        this.isChildUpdate3 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
      } else if (tab.name === 'seventh') {
        this.isChildUpdate7 = true
        this.isChildUpdate1 = false
        this.isChildUpdate2 = false
        this.isChildUpdate3 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
        this.isChildUpdate6 = false
      } else if (tab.name === 'eighth') {
        this.isChildUpdate8 = true
        this.isChildUpdate1 = false
        this.isChildUpdate2 = false
        this.isChildUpdate3 = false
        this.isChildUpdate4 = false
        this.isChildUpdate5 = false
        this.isChildUpdate6 = false
        this.isChildUpdate7 = false
      }
    }
  }
}
</script>
